@import "mixins";

:host {
  @include ngTextInput();
  @include ngTextInputColor(input, true);
  padding-top: 5px;
  padding-bottom: 5px;
  position: relative;
  display: flex;
  width: 100%;
  min-height: 20px;
  .bubblesContainer {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    row-gap: 5px;
    width: 100%;
    .bubble {
      display: flex;
      align-items: center;
      padding: 5px;
      justify-content: space-between;
      align-items: center;
      background: var(--color-ng-bubbles-background);
      border: solid 2px var(--color-ng-bubbles-border);
      color: white;
      opacity: 0.8;
      border-radius: 10px;
      margin-right: 5px;
      span {
        height: 20px;
      }
      .delete {
        margin-left: 0.25em;
      }
      .editable,
      .editablePlus {
        display: flex;
        min-width: 10px;
        height: 20px;
        cursor: white;
      }
    }
  }
}
